<template>
    <div class='bomDetail'>
        <div class="title">工艺路线详情</div>
        <div class="formArea">
            <el-form ref="createForm" label-width="120px" size="mini">
                <el-form-item label="工艺路线编号">
                    {{ detailData.code }}
                </el-form-item>
                <el-form-item label="工艺路线名称" prop="name">
                    {{ detailData.name }}
                </el-form-item>
                <el-form-item label="工序列表" prop="name">
                    <el-table :data="tableList" border style="width: 40%;"
                        :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                        element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading"
                        :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}"
                        ref='selTable'>
                        <el-table-column
                            v-for="(item, i) in tableHeaderList"
                            :label="item.name"
                            :prop="item.label"
                            :min-width="item.width"
                            show-overflow-tooltip
                            :key='i'
                        >
                        </el-table-column>
                        <div slot="empty">
                            <el-empty :image-size="100"></el-empty>
                        </div>
                    </el-table>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detailData: {},
            tableHeaderList: [
                {
                    label: 'index',
                    name: '序号',
                    width: 80
                },
                {
                    label: 'type',
                    name: '类型',
                    width: 100
                },
                {
                    label: 'name',
                    name: '工序名称',
                    width: 80
                },
                {
                    label: 'rate',
                    name: '报工数配比',
                    width: 80
                }
            ],
            tableList: []
        }
    },
    mounted() {
        this.detailData = JSON.parse(this.$route.query.node)
        this.detailData.list.map((item, i) => {
            this.tableList.push({
                id: item.id,
                type: item.type,
                name: item.code + ' | ' + item.name,
                rate: item.rate,
                index: i + 1
            })
        })
    }
}
</script>

<style lang="less" scoped>
.bomDetail {
    padding: 20px;
    .title {
        font-size: 22px;
        margin-bottom: 15px;
    }
}
</style>